<?php  
	$sql_update_is_shown = "UPDATE inbox set is_shown = false";
  $query_update_is_shown = mysql_query($sql_update_is_shown);
?>

<STYLE TYPE="text/css">
	#notif{
		position: fixed;
		bottom: 20px;
		right: 20px;
	}
	.form{
		border: 1px solid #08c;
		width: 250px;
		border-radius: 5px;
		margin-top: 20px;
		cursor: pointer;
	}
	.isiNotif{
		padding: 5px;
		background-color: rgba(255, 255, 255, 0.7);
	}
	.pengirim{
		opacity: 1;
		margin: -5px -5px 0px -5px;
		background-color: rgba(0, 130, 180, 0.7);
		color: #FFF;
		padding: 5px;
	}
	.keluar:hover{
		opacity: 2.0;
	}
</STYLE>

<div id="notif">

</div>


<SCRIPT TYPE="text/javascript">
	var time;
	var isi = "";
	var id = 1;
	function showNotif(){
	    $.getJSON('act_notif.php', function(notif) {
	        $.each(notif,function(i,item){
				isi = "<div id='formNotif"+id+"' class='form'>"+
						"<div class='isiNotif'>"+
							"<div class='pengirim'>"+
								"<span style='font-weight: bold;'>Dari : </span>"+
								"<span>"+item.nomor+
									"<input type='hidden' class='idPesan' value='"+item.idPesan+"'>";
				isi += 			"</span>"+
								"<span class='pull-right keluar' style='cursor: pointer; '>"+
									"<i class='icon-white icon-remove'></i>"+
								"</span>"+
								"</div>"+
							"<div id='pesan'>"+item.pesan;
				isi += 		"</div>"+
						"</div>"+
						"<audio style='display: none;' src='sound/notif.mp3' autoplay></audio>"+
					"</div>";
				$('#notif').append(isi).fadeIn();
				hideNotif(id);
				id++;
			});
		});
	}

	function hideNotif(idNotif){
		var jumlah = $('.form').length;
		if (jumlah > 6) {
			$('#formNotif'+(idNotif-6)).fadeOut();
		};
		setTimeout(function() {
			$('#formNotif'+idNotif).fadeOut();
		}, 10000);
	}

	function clearTime(){
		clearTimeout(time);
	}

	$(document).ready(function() {
		setInterval('showNotif()', 1000);
		$('.keluar').live('click', function(){
			tempView = $(this);
			var form_pesan = {
                id_inbox: tempView.parent('div').find('.idPesan').val()
            };
            $.ajax({ 
                type: "POST",
                url: "act_notif.php?aksi=1",
                data: form_pesan, 
                cache: false, 
                success: function(msg){ 
                	alert("haha");
                	console.log(tempView.parent('div').find('.idPesan').val());
                } 
            }); 
			$(this).closest('.form').fadeOut().remove();
            return false;
		});

		$('.form').live('click',function(){
			tempView = $(this);
            $("#tampil-modal").fadeOut("medium",function(){
                var form_pesan = {
                    id_inbox: tempView.find('.idPesan').val()
                };
                $.ajax({ 
                    type: "POST",
                    url: "inbox-modal.php",
                    data: form_pesan, 
                    cache: false, 
                    success: function(msg){ 
                        $("#tampil-modal").html(msg);
                        $("#tampil-modal").fadeIn("medium");
                    } 
                }); 
            });
            return false;
		});
	});
</SCRIPT>